<template>
  <div class="shuig">
    <h1>欢迎光临水果店</h1>
    <h2>苹果10￥/斤，折扣 《 8折 》</h2>
    <span>请输入要购买的尽数 <input v-model.number="num1" type="number"></span>
    <br>
    <button @click="jz">结账买单</button>
    <div>结账单：总价{{num2*10}}￥元 折后价：{{num2*0.8}}￥元 省了：{{num2*2}}￥元</div>
  </div>
</template>

<script>
export default {
data() {
  return {
    num1:0,
    num2:''
  }
},
methods:{
  jz(){
    this.num2=this.num1
  }
}
}
</script>

<style>
.shuig{
  margin: 0 auto;
  text-align: center;
}
</style>